<!--  -->
<template>
  <div class="purconfirm container">
    <div class="confirm-address">
      <h1>确认收货地址</h1>
      <ul>
        <li>
          <div>
            <span class="el-icon-map-location"></span>寄送至 &nbsp;
            <el-radio-group class="sentAddress" v-model="selectaddId">
              <div v-for="(item, index) in adderssList" :key="index">
                <el-radio :label="item.id" border v-model="item.id"
                  >{{ item.detailAddress }} (<span class="name">{{ item.name }}</span>
                  收） {{ item.phone }} &nbsp;</el-radio
                >
              </div>
            </el-radio-group>
            <!-- <p class="sentAddress" >
              
            </p> -->
          </div>

          <!-- <span class="isdefault" v-show="item.defaultStatus === 1 ? true : false"
            >默认地址</span
          > -->
          <!-- <span class="isdefault"></span> -->
        </li>
      </ul>
      <el-button type="primary" @click="addressVisible = true">添加新地址</el-button>
    </div>
    <div class="confirm-order">
      <h1>确认订单信息</h1>
      <div class="content">
        <ul>
          <li class="header">
            <div class="pro-img"></div>
            <div class="pro-name">商品名称</div>
            <div class="pro-price">单价</div>
            <div class="pro-num">数量</div>
            <div class="pro-total">小计</div>
          </li>

          <li class="product-list" v-for="item in shoppingCart" :key="item.skuid">
            <div class="pro-img">
              <router-link :to="{ path: '/details', query: { id: item.proid } }">
                <img :src="item.skuImg" class="img" />
              </router-link>
            </div>
            <div class="pro-name">
              {{ item.skuName }}
              <!-- <router-link>{{item.productName}}</router-link> -->
            </div>
            <div class="pro-price">{{ item.price }}元</div>
            <div class="pro-num">
              {{ item.count }}
            </div>
            <div class="pro-total pro-total-in">{{ item.price * item.count }}元</div>
          </li>
        </ul>
        <div style="height: 20px"></div>
        <div class="cart-bar">
          <div class="cart-bar-left">
            <span class="cart-back" @click="$router.push('/shopcar')"
              >返回购物车
              <!-- <router-link ></router-link> -->
            </span>
          </div>
          <div class="cart-bar-right">
            <span>
              <span class="total-price-title">实付款：</span>
              <span class="total-price">{{ totalPrice }}</span>
            </span>
            <div @click="getUp">提交订单</div>
            <!-- <router-link>
            
          </router-link> -->
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="添加地址" :visible.sync="addressVisible" width="50%" center>
      <el-form
        :model="addressInfo"
        ref="editFormRef"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm addressUpdate"
      >
        <el-form-item label="收货人姓名" prop="name">
          <el-input style="width: 400px" v-model="addressInfo.name"></el-input>
        </el-form-item>
        <el-form-item style="width: 500px" label="手机号" prop="phone">
          <el-input v-model="addressInfo.phone"></el-input>
        </el-form-item>
        <el-form-item style="width: 500px" label="收货地址" prop="detailAddress">
          <el-input v-model="addressInfo.detailAddress"></el-input>
        </el-form-item>
        <el-form-item style="width: 500px" label="邮政编码" prop="postCode">
          <el-input v-model="addressInfo.postCode"></el-input>
        </el-form-item>
        <el-form-item label="是否默认" prop="defaultStatus">
          <el-radio v-model="addressInfo.defaultStatus" label="1">是</el-radio>
          <el-radio v-model="addressInfo.defaultStatus" label="2">否</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addressVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 支付弹框 -->
    <el-dialog
      title="请用支付宝扫码支付"
      :visible.sync="centerDialogVisible"
      width="25%"
      center
    >
      <div>
        <img style="height: 300px; width: 300px" src="../../assets/ewm.jpg" alt="" />
      </div>
      <span slot="footer">
        <el-button @click="notAddOrder">取 消</el-button>
        <el-button type="primary" @click="addOrder">我已支付</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cookie from "js-cookie";
export default {
  name: "Purconfirm",
  data() {
    return {
      centerDialogVisible: false,
      selectaddId: 1,
      adderssList: [],
      shoppingCart: [],
      totalPrice: "",
      addressVisible: false,
      addressInfo: {
        userId: "",
        name: "",
        phone: "",
        detailAddress: "",
        postCode: "",
        defaultStatus: 2,
      },
      rules: {
        name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        nadetailAddress: [{ required: true, message: "地址不能为空", trigger: "blur" }],
        postCode: [{ required: true, message: "邮政编码不能为空", trigger: "blur" }],
        detailAddress: [{ required: true, message: "收获地址不能为空", trigger: "blur" }],
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请输入合法手机号/电话号",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getAddressInfo();
    this.shoppingCart = this.$store.state.buyGoodsList;
    console.log("shopping", this.shoppingCart);
    this.totalPrice = this.$store.state.totalPrice;
  },
  methods: {
    // 获取地址信息
    async getAddressInfo() {
      const { data: res } = await this.$http.get("/dqxmall/useraddress/info");
      // console.log(res);
      if (res.msg === "success") {
        this.adderssList = res.userAddress;
      }
    },
    // 关闭修改对话框
    editDialogClose() {
      this.$refs.editFormRef.resetFields();
    },
    // 添加新地址
    async onSubmit() {
      // this.addressVisible = true;
      // console.log("添加地址");
      this.addressInfo.userId = JSON.parse(cookie.get("userInfo")).id;
      const { data: res } = await this.$http.post(
        "/dqxmall/useraddress/save",
        this.addressInfo
      );
      // console.log(res)
      if (res.msg === "success") {
        this.$message.success("添加成功");
        this.getAddressInfo();
      }
      this.addressVisible = false;
    },
    // 添加订单
    async getUp() {
      // console.log("this.shoppingCart", this.shoppingCart);
      // new Date().getTime(); //当前时间 变成时间戳
      // new Date(res.data.beginTime).getTime()  //获取到的时间转化成时间格式，再变成时间戳
      const { data: res } = await this.$http.post("/dqxmall/order/save", {
        price: this.totalPrice,
        useraddressid: this.selectaddId,
        item: this.shoppingCart,
        // id: new Date().getTime(), //当前时间 变成时间戳
      });
      // console.log(res);
      if (res.code === 0) {
        this.centerDialogVisible = true;
        if (this.shoppingCart[0].id) {
          var ids = [];
          this.shoppingCart.forEach((item) => {
            ids.push(item.id);
          });
          // 订单添加完成则删除购物车中的信息
          const { data: res } = await this.$http.post("/dqxmall/cart/delete", ids);
          if (res.code === 0) {
            var number = this.$store.state.shopcarNumber - ids.length;
            this.$store.dispatch("setShopcarNumber", number);
            cookie.set("shopcarNumber", number, { domain: "localhost" });
            this.$store.dispatch("setBuyGoodsList", "");
            this.$store.dispatch("setTotalPrice", "");
          }
          // 订单提交完成添加库存信息改变
          this.shoppingCart.forEach(async (item) => {
            const { data: res1 } = await this.$http.post(
              "/dqxmall/prosysskuinfo/update",
              {
                skuId: item.skuid,
                stockCount: item.stockCount - item.count,
              }
            );
            if (res1.code !== 0) return;
          });
        } else {
          // 订单提交完成添加库存信息改变
          const { data: res1 } = await this.$http.post("/dqxmall/prosysskuinfo/update", {
            skuId: this.shoppingCart.skuid,
            stockCount: this.shoppingCart.stockCount - this.shoppingCart.count,
          });
          if (res1.code !== 0) return;
        }
      }
    },
    // 支付完成
    addOrder() {
      this.centerDialogVisible = false;
      this.$router.push("/order");
    },
    // 未完成支付
    notAddOrder() {
      this.centerDialogVisible = false;
      this.$router.push("/order");
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/total";
.purconfirm {
  .confirm-address {
    h1 {
      border-bottom: 1px solid rgb(92, 91, 91);
      padding: 10px;
    }
    li {
      margin: 10px;
      .el-icon-map-location {
        display: inline-block;
        margin: 2px 40px;
        color: rgb(246, 98, 12);
      }
      .sentAddress {
        margin: 10px 0 10px 50px;
        .el-radio {
          margin: 10px 0;
        }
      }
      .sentadd1 {
        display: inline-block;
        visibility: visible;
      }
      .sentadd {
        display: inline-block;
        visibility: hidden;
      }
      .isdefault {
        display: inline-block;
        padding: 10px;
        border-radius: 3px;
        color: white;
        font-size: 15px;
        background-color: rgb(248, 82, 5);
        cursor: pointer;
      }
    }
  }
  .confirm-order {
    h1 {
      border-bottom: 1px solid rgb(92, 91, 91);
      padding: 10px;
    }
    .content {
      box-sizing: border-box;
      li {
        border-bottom: 1px solid rgb(138, 137, 137);
      }
      .header,
      .product-list {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 120px;
        .pro-check,
        .pro-img,
        .pro-total,
        .pro-action {
          width: 120px;
          text-align: center;
          .img {
            height: 100px;
            width: 100px;
          }
        }
        .pro-name {
          width: 370px;
        }
        .pro-price,
        .pro-num {
          width: 180px;
          text-align: center;
        }
      }
      .cart-bar {
        height: 60px;
        .cart-bar-left {
          text-align: center;
          float: left;
          margin-bottom: 20px;
          span {
            height: 50px;
            width: 100px;
            padding-left: 30px;
          }
          .sep {
            margin: 0 10px;
          }

          .cart-total {
            .cart-total-num {
              color: rgb(255, 123, 0);
            }
          }
          .cart-back {
            display: inline-block;
            height: 40px;
            padding: 8px 5px 5px 5px;
            box-sizing: border-box;
            color: white;
            cursor: pointer;
            background-color: rgb(255, 123, 0);
          }
        }
        .cart-bar-right {
          float: right;
          display: flex;
          span {
            .total-price-title {
              width: 200px;
              font-size: 15px;
              color: rgb(255, 123, 0);
            }
            .total-price {
              font-size: 25px;
            }
          }
          div {
            color: white;
            width: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            margin: 0 20px;
            cursor: pointer;
            background-color: rgb(255, 123, 0);
          }
        }
      }
    }
  }
}
</style>
